<template>
    <div class='container'>

        <div class="container">
            <el-tabs v-model="activeName1" @tab-click="handleClick1">
                <el-tab-pane :label="item.templateName" :name="item.id" v-for="(item,index) in list1" :key="index">

                </el-tab-pane>
                <!-- <tablelist :activeName1 = "activeName1"></tablelist> -->
            </el-tabs>
        </div>

        <el-form>
            <el-row :gutter="16">
                <el-col :span="12">
                    <div class="container">
                        <h3 style="margin-bottom: 20px">打印设置(模板)</h3>
                        <div>
                            <el-form-item v-for="(item,index) in content" :key="index" v-dragging="{ list: content, item: item, group: 'content' }">
                                <el-input v-model.trim="item.name" style="width: 170px"></el-input>
                                <span v-if="item.type != '规格'&& item.type!=''?true:false">{{item.details}}</span>
                                <span v-if="item.type == '规格'?true:false" v-show="type == 'c50tj'">100克<el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input>2100克</span>
                                <span v-if="item.type == '规格'?true:false" v-show="type != 'c50tj' && type != 'c60pt' && type != 'c70pt'"><el-input v-model.trim="item.detailone" style="width:150px;margin:0px 10px;"></el-input>100g<el-input v-model.trim="item.details" style="width:150px;margin:0px 10px;"></el-input>2100g</span>
                                <span v-if="item.type == '规格'?true:false" v-show="type == 'c60pt' || type == 'c70pt'"><el-input v-model.trim="item.detailone" style="width:150px;margin:0px 10px;"></el-input>1g<el-input v-model.trim="item.details" style="width:150px;margin:0px 10px;"></el-input>3.3g</span>
                                <span v-if="item.type == ''?true:false"><el-input v-model.trim="item.details" style="width:250px;margin:0px 10px;"></el-input></span>
                                <el-button v-show="item.type == ''" @click="deleteitem($event,index)" style="margin-left:30px;">删除</el-button>
                            </el-form-item>
                            <el-form-item label-width="100px">
                                <el-button @click="additem">添加一条</el-button>
                            </el-form-item>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="container">
                        <h3 style="margin-bottom: 20px">打印预览({{name}})</h3>
                        <div class="container codeView codeViewC50">
                            <div class="codeimg"><img src="../../../../assets/img/codeImg1.png" width="50%" /></div>
                            <!-- <el-radio v-model="radioValue" label="1"></el-radio> -->
                            <h5>生地黄</h5>
                            <div>
                                <el-form :label-position="labelPosition" label-width="180px">
                                    <el-row>
                                        <el-form-item v-for="(item,index) in content" :key="index" :label="item.name ">
                                            <!-- &nbsp;&nbsp; -->
                                            <span v-if="item.type != '规格'?true:false">{{item.details}}</span>
                                            <span v-if="item.type == '规格'?true:false" v-show="type == 'c50tj'">100克{{item.details}}2100克</span>
                                            <span v-if="item.type == '规格'?true:false" v-show="type != 'c50tj'">{{item.detailone}}100g{{item.details}}2100g</span>
                                        </el-form-item>
                                    </el-row>
                                </el-form>
                            </div>
                            <div class="img"><img src="../../../../assets/img/codeImg.png" width="50%" /></div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-form-item class="footerFixed">
                <el-button type="primary" @click="submitRules('ruleForm')">提交</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
import { template_findByCompanyId, template_save } from '@/request/manageapi';
import draggable from 'vuedraggable';
// import tablelist from "./tablelist.vue"
export default {
    components: { draggable },
    // components:{
    //     tablelist
    // },
    data() {
        return {
            labelPosition: 'left',
            list: [],
            activeName: '',
            activeName1: '',
            list1: [],
            content: [
                { name: '产品批号', details: '1710007', type: '批号' },
                { name: '装量', details: '相当于饮片', type: '规格' },
                { name: '生产日期', details: '2020.08.07', type: '生产日期' },
                { name: '有效期至', details: '2020.09', type: '有效期至' }
            ],
            name: '',
            arr: [],
            type: ''
        };
    },
    mounted() {
        this.init1();
    },
    methods: {
        handleClick1(e) {
            // console.log(e)
            this.name = e.label;
            this.arr = this.list1[e.index];
            this.type = this.list1[e.index].type;
            // console.log(this.list1[e.index])
            this.content = JSON.parse(this.list1[e.index].content);
            for (var i = 0; i < this.content.length; i++) {
                if (this.content[i].type == '批号') {
                    this.content[i].details = '19040021';
                }
                if (this.content[i].type == '生产日期') {
                    this.content[i].details = '2019.03.19';
                }
                if (this.content[i].type == '有效期至') {
                    this.content[i].details = '35个月';
                }
                if (this.content[i].type == '包装规格') {
                    this.content[i].details = '每袋装100克';
                }
            }
        },
        handleClick(e) {
            this.init1();
        },

        init1() {
            let companyId = localStorage.getItem('companyId') + '&isNew=5';
            template_findByCompanyId(`?companyId=${companyId}`).then((res) => {
                this.list1 = res.data;
                this.activeName1 = res.data[0].id;
                this.type = res.data[0].type;
                this.name = res.data[0].templateName;
                this.arr = res.data[0];
                this.content = JSON.parse(res.data[0].content);

                for (var i = 0; i < this.content.length; i++) {
                    if (this.content[i].type == '批号') {
                        this.content[i].details = '19040021';
                    }
                    if (this.content[i].type == '生产日期') {
                        this.content[i].details = '2019.03.19';
                    }
                    if (this.content[i].type == '有效期至') {
                        this.content[i].details = '35个月';
                    }
                    if (this.content[i].type == '包装规格') {
                        this.content[i].details = '每袋装100克';
                    }
                }
            });
        },
        submitRules() {
            this.$confirm('确定要提交吗，确定后模板将修改', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // template_save(data).then((res)=>{
                //     this.$notify({
                //         title:'提示',
                //         message:'修改成功',
                //         type:"success"
                //     })
                //     this.init1()
                // })
                this.arr.content = JSON.stringify(this.content);
                //  console.log(this.arr)
                template_save(this.arr).then((res) => {
                    this.$notify({
                        title: '提示',
                        message: '修改成功',
                        type: 'success'
                    });
                    // this.handleClick
                });
            });
        },
        additem() {
            this.content.push({ name: '限制四字', details: '自定义输入内容', type: '' });
        },
        deleteitem(event, index) {
            this.content.splice(index, 1);
        }
    }
};
</script>


<style scoped lang="less">
.container {
    min-height: 65%;
}
.el-pagination {
    text-align: center;
}
.el-radio__input.is-checked + .el-radio__label {
    display: none;
}
.codeView {
    position: relative;
    padding-left: 30px;
    .el-radio {
        position: absolute;
        left: 0;
        top: 30%;
        .el-radio__label {
            display: none;
        }
    }
    h5 {
        font-size: 18px;
        color: #303133;
        margin-bottom: 10px;
    }
    .el-form-item {
        margin-bottom: 0;
    }
    .img {
        position: absolute;
        right: 0px;
        top: 30px;
        transform: scale(1.5);
    }
}
.codeViewC50 {
    padding: 10px 20px;
    .el-radio {
        position: absolute;
        left: -22px;
        top: 50%;
        .el-radio__label {
            display: none;
        }
    }
    p {
        // width: 218px;
        text-align: center;
        display: inline-block;
    }
    h5 {
        display: block;
        width: 245px;
        text-align: center;
    }
}
</style>
